<!-- 人员管理-安全题库-试题列表 -->
<template>
    <div class="questionBank">
        <!-- 搜索 -->
        <el-card class="box-card" body-style="display: flex; align-items: center; justify-content: space-between;">
            <div class="cardBody">
                <div class="cardBody1">
                    试题分类:
                    <el-select class="ecard_val" v-model="searchItem.classification" clearable placeholder="请选择"
                        size="small">
                        <el-option v-for="item in classificationOptions" :key="item.value" :label="item.label"
                            :value="item.value"></el-option>
                    </el-select>
                </div>
                <div class="cardBody1">
                    试题名称:
                    <el-input class="ecard_val" placeholder="请输入" v-model="searchItem.TestQuestionName" clearable
                        size="small"></el-input>
                </div>
                <div>
                    <el-button type="primary" size="small">搜索</el-button>
                </div>
            </div>
            <el-button type="primary" size="small" @click="onAdd">添加试题</el-button>
        </el-card>

        <!-- 列表 -->
        <el-card class="boxCard">
            <el-table :data="tableData" stripe style="width: 100%" :height="tableHeight">
                <el-table-column prop="val1" label="试题名称"></el-table-column>
                <el-table-column prop="val3" label="封面" align="center">
                    <template slot-scope="scope">
                        <el-image style="width: 50px; height: 50px" :src="scope.row.val3" fit="cover"
                            :preview-src-list="[scope.row.val3]"></el-image>
                    </template>
                </el-table-column>
                <el-table-column prop="title" label="试题分类"></el-table-column>
                <el-table-column prop="val4" label="题目数量"></el-table-column>
                <el-table-column prop="val01" label="总分数"></el-table-column>
                <el-table-column prop="val02" label="通过分数"></el-table-column>
                <el-table-column prop="val5" label="状态">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.val5 == 1" type="success">显示</el-tag>
                        <el-tag v-if="scope.row.val5 == 2" type="danger">隐藏</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="val6" label="创建时间" width="110"></el-table-column>

                <el-table-column fixed="right" label="操作" align="center" width="100">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="onEdit(scope.row)">编辑</el-button>
                        <el-popconfirm title="确定要删除此项吗？" @confirm="onDel(scope.row)">
                            <el-button slot="reference" type="text" size="small">删除</el-button>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
            <div class="boxCard_pagination">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="currentPage" :page-sizes="[10, 30, 50, 100]" :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </div>
        </el-card>

        <!-- 弹窗 -->
        <el-dialog title="添加试题" :visible.sync="dialogVisible">
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="基础设置" name="settings">
                    <el-form :model="formData">
                        <el-form-item label="试卷名称">
                            <el-input class="abcdCl" placeholder="请输入" v-model="formData.title" clearable
                                size="small"></el-input>
                        </el-form-item>
                        <el-form-item label="试题分类">
                            <el-select v-model="formData.categoryId" clearable placeholder="请选择" size="small"
                                class="abcdCl">
                                <el-option v-for="item in classificationOptions" :key="item.value" :label="item.label"
                                    :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="试题状态">
                            <el-radio-group v-model="formData.status">
                                <el-radio :label="1">显示</el-radio>
                                <el-radio :label="2">隐藏</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="每道分数" style="display: flex; align-items: center;">
                            <el-input-number v-model="formData.EachScore" :min="1" :max="100" label="每道分数"
                                size="small"></el-input-number> 分/题
                        </el-form-item>
                        <el-form-item label="通过分数" style="display: flex; align-items: center;">
                            <el-input-number v-model="formData.ByScore" :min="1" :max="100" label="通过分数"
                                size="small"></el-input-number> 分通过
                        </el-form-item>
                        <el-form-item label="试题难度" style="display: flex; align-items: center;">
                            <el-rate v-model="formData.difficulty"></el-rate>
                        </el-form-item>
                        <el-form-item label="试卷封面">
                            <el-upload style="width:300px" class="upload-demo" :on-preview="handlePreview"
                                :on-remove="handleRemove" action="" :before-remove="beforeRemove" multiple :limit="1"
                                :on-exceed="handleExceed" :file-list="fileList" :http-request="httpRequest">
                                <el-button size="small" type="primary">点击上传</el-button>
                                <div slot="tip" class="el-upload__tip"><!-- 上传文件不超过500kb --></div>
                            </el-upload>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>

                <el-tab-pane label="试题选择" name="choice">
                    <el-table :data="tableDialog" stripe style="width: 100%" @selection-change="handleSelectionChange">
                        <el-table-column type="selection" width="55"></el-table-column>
                        <el-table-column prop="val1" label="试题分类" width="150"></el-table-column>
                        <el-table-column prop="title" label="试题名称"></el-table-column>
                        <el-table-column prop="val3" label="题干"></el-table-column>
                        <el-table-column prop="val4" label="创建时间" width="110"></el-table-column>
                    </el-table>
                    <div class="boxCard_pagination">
                        <el-pagination @size-change="miniSize" @current-change="miniCurrent" :current-page="mini_Page"
                            :page-sizes="[10, 30, 50, 100]" :page-size="mini_Size"
                            layout="total, sizes, prev, pager, next, jumper" :total="mini_Total">
                        </el-pagination>
                    </div>
                </el-tab-pane>
            </el-tabs>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="postRequest">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
    import {
        appDocumentManageFileUpload,
        apiTrainingList,
        apiTrainingAdd,
        apiTrainingEdit,
        apiTrainingDel,
    } from "@/api/apifox.js";
    export default {
        components: {},
        data() {
            return {
                tableHeight: window.innerHeight - 355,
                // 搜索
                searchItem: {
                    classification: '', // 试题分类
                    TestQuestionName: '', // 试题名称
                },
                classificationOptions: [{
                        value: 1,
                        label: '理论课程'
                    },
                    {
                        value: 2,
                        label: '施工安全知识'
                    },
                    {
                        value: 3,
                        label: '电工理论知识'
                    },
                ], // 试题分类列表

                tableData: [{
                        id: 1,
                        val1: '使用灭火器扑救火灾',
                        title: '施工安全知识',
                        val3: 'https://zhgd01.ct10.cc/ms/dev/documentManage/file/2025092819361623719.jpeg',
                        val4: '111',
                        val5: 1,
                        val6: '2025-10-10 12:00:00',
                        val01: '100',
                        val02: '80'
                    },
                    {
                        id: 2,
                        val1: '使用灭火器扑救火灾',
                        title: '施工安全知识',
                        val3: 'https://zhgd01.ct10.cc/ms/dev/documentManage/file/2025092819361623719.jpeg',
                        val4: '111',
                        val5: 1,
                        val6: '2025-10-10 12:00:00',
                        val01: '100',
                        val02: '80'
                    },
                    {
                        id: 3,
                        val1: '使用灭火器扑救火灾',
                        title: '施工安全知识',
                        val3: 'https://zhgd01.ct10.cc/ms/dev/documentManage/file/2025092819361623719.jpeg',
                        val4: '111',
                        val5: 1,
                        val6: '2025-10-10 12:00:00',
                        val01: '100',
                        val02: '80'
                    },
                    {
                        id: 4,
                        val1: '使用灭火器扑救火灾',
                        title: '施工安全知识',
                        val3: 'https://zhgd01.ct10.cc/ms/dev/documentManage/file/2025092819361623719.jpeg',
                        val4: '111',
                        val5: 1,
                        val6: '2025-10-10 12:00:00',
                        val01: '100',
                        val02: '80'
                    },
                ], // 列表
                currentPage: 1, // 当前页数
                pageSize: 10, // 每页显示条目个数
                total: 4, // 总条目数

                dialogVisible: false, // 对话框
                formData: {
                    difficulty: null, // 试题难度
                    fileImg: '', // 封面
                    multipleSelection: [], // 选择的考题
                    EachScore: 1, // 每道分数
                    ByScore: 80, // 通过分数

                    categoryId: null, // 分类ID
                    title: '', // 标题
                    description: '', // 描述
                    questionCount: '', // 数量
                    sortOrder: 1, // 排序
                    status: 1, // 状态
                },
                activeName: 'settings', // 基础设置:settings, 试题选择:choice

                fileList: [],
                formImage: {
                    fileName: '',
                    fileSize: '',
                    fileType: '',
                    fileUrl: '',
                },
                tableDialog: [{
                        val1: '施工安全知识',
                        title: '使用灭火器扑救火灾',
                        val3: '使用灭火器扑救火灾时要对准火焰(  )喷射',
                        val4: '2025-10-10 12:00:00',
                    },
                    {
                        val1: '施工安全知识',
                        title: '使用灭火器扑救火灾',
                        val3: '使用灭火器扑救火灾时要对准火焰(  )喷射',
                        val4: '2025-10-10 12:00:00',
                    },
                    {
                        val1: '施工安全知识',
                        title: '使用灭火器扑救火灾',
                        val3: '使用灭火器扑救火灾时要对准火焰(  )喷射',
                        val4: '2025-10-10 12:00:00',
                    },
                    {
                        val1: '施工安全知识',
                        title: '使用灭火器扑救火灾',
                        val3: '使用灭火器扑救火灾时要对准火焰(  )喷射',
                        val4: '2025-10-10 12:00:00',
                    },
                ],
                mini_Page: 1, // 当前页数
                mini_Size: 10, // 每页显示条目个数
                mini_Total: 4, // 总条目数
                projectId: '',
                formVal: 1, // 1添加2修改
            };
        },
        computed: {},
        created() {

        },
        mounted() {
            this.projectId = this.$store.state.porjectObject.deptId;
            this.getList();
        },
        methods: {
            getList() {
                apiTrainingList({
                    deptId: this.projectId,
                    pageSize: this.mini_Size, // 分页大小
                    pageNum: this.mini_Page, // 分页页码
                }).then(res => {
                    console.log('题库列表: ', res);
                    if (res.code == 200) {
                        // this.list = res.data.list;
                        // this.total = res.data.total;
                    } else {
                        // this.$Message.warning(res.msg);
                    }
                }).catch(error => {
                    console.log(error);
                });
            },
            /* 添加事件 */
            onEdit(row) {
                this.formData = {
                    difficulty: null, // 试题难度
                    fileImg: '', // 封面
                    multipleSelection: [], // 选择的考题
                    EachScore: 1, // 每道分数
                    ByScore: 80, // 通过分数

                    categoryId: null, // 分类ID
                    title: '', // 标题
                    description: '', // 描述
                    questionCount: '', // 数量
                    sortOrder: 1, // 排序
                    status: 1, // 状态
                }

                this.formVal = 2;

                this.formData = {
                    id: row.id,
                    title: row.title
                }
                console.log(this.formData)
                this.dialogVisible = true
            },

            /* 添加事件 */
            onAdd() {
                this.formData = {
                    difficulty: null, // 试题难度
                    fileImg: '', // 封面
                    multipleSelection: [], // 选择的考题
                    EachScore: 1, // 每道分数
                    ByScore: 80, // 通过分数

                    categoryId: null, // 分类ID
                    title: '', // 标题
                    description: '', // 描述
                    questionCount: '', // 数量
                    sortOrder: 1, // 排序
                    status: 1, // 状态
                }

                this.formVal = 1;
                this.dialogVisible = true
            },

            postRequest() {
                if (this.formData.title == '') {
                    this.$Message.warning('请输入试卷名称！');
                    return
                }
                console.log('请求参：', this.formData)
                if (this.formVal == 1) {
                    apiTrainingAdd({
                        categoryId: this.formData.categoryId, // 分类ID
                        title: this.formData.title, // 标题
                        name: this.formData.title, // 标题
                        description: this.formData.description, // 描述
                        questionCount: this.formData.questionCount, // 数量
                        sortOrder: this.formData.sortOrder, // 排序
                        status: this.formData.status, // 状态
                        deptId: this.projectId,
                    }).then(res => {
                        console.log('新增: ', res);
                        if (res.code == 200) {
                            this.dialogVisible = false
                            this.getList();
                            this.$Message.success("操作成功");
                        } else {
                            // this.$Message.warning(res.msg);
                        }
                    }).catch(error => {
                        console.log(error);
                    });
                } else {
                    apiTrainingEdit({
                        id: this.formData.id, // ID
                        categoryId: this.formData.categoryId, // 分类ID
                        title: this.formData.title, // 标题
                        name: this.formData.title, // 标题
                        description: this.formData.description, // 描述
                        questionCount: this.formData.questionCount, // 数量
                        sortOrder: this.formData.sortOrder, // 排序
                        status: this.formData.status, // 状态
                        deptId: this.projectId,
                    }).then(res => {
                        console.log('修改: ', res);
                        if (res.code == 200) {
                            this.dialogVisible = false
                            this.getList();
                            this.$Message.success("操作成功");
                        } else {
                            // this.$Message.warning(res.msg);
                        }
                    }).catch(error => {
                        console.log(error);
                    });
                }

            },

            onDel(row) {
                console.log(row, row.id)
                apiTrainingDel(row.id).then(res => {
                    console.log('删除: ', res);
                    if (res.code == 200) {
                        this.getList();
                        this.$Message.success("操作成功");
                    } else {
                        // this.$Message.warning(res.msg);
                    }
                }).catch(error => {
                    console.log(error);
                });
            },

            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            },

            handleClick(tab, event) {
                console.log(tab, event);
            },

            /* 选择的考题 */
            handleSelectionChange(val) {
                console.log('选择的试题：', val);
                this.formData.multipleSelection = val;
            },
            miniSize(val) {
                console.log(`每页 ${val} 条`);
            },
            miniCurrent(val) {
                console.log(`当前页: ${val}`);
            },

            //实现图片上传功能
            httpRequest(item) {
                console.log('0', item.file.name);
                var formData = new FormData()
                formData.append('file', item.file)
                appDocumentManageFileUpload(formData).then(res => {
                    console.log('上传结果', res);
                    this.formData.fileImg = res.data.path;
                    this.formImage.fileName = res.data.name; // 附件名称
                    this.formImage.fileSize = res.data.size; // 附件大小
                    this.formImage.fileType = res.data.fileType; // 附件类型
                    this.formImage.fileUrl = res.data.path; // 附件路径
                    this.$Message.success("上传成功");

                }).catch((err) => {
                    console.log(error);
                })
            },
            handleRemove(file, fileList) {
                console.log('1', file, fileList);
                this.formImage.fileName = ''; // 附件名称
                this.formImage.fileSize = ''; // 附件大小
                this.formImage.fileType = ''; // 附件类型
                this.formImage.fileUrl = ''; // 附件路径
            },
            handlePreview(file) {
                console.log('2', file);
            },
            handleExceed(files, fileList) {
                console.log('3', files, fileList);
                this.$message.warning(
                    `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
            },
            beforeRemove(file, fileList) {
                console.log('4', file, fileList);
                return this.$confirm(`确定移除 ${file.name}？`);
            },
        }
    };
</script>

<style lang="scss" scoped>
    .questionBank {
        padding: 20px;

        .box-card {

            .cardBody {
                display: flex;
                align-items: center;
                gap: 15px;

                .cardBody1 {
                    display: flex;
                    align-items: center;
                    gap: 10px;

                    .ecard_val {
                        width: 200px;
                    }
                }
            }
        }

        .boxCard {
            margin-top: 20px;
        }

        .boxCard_pagination {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 20px;
        }

        .abcdCl {
            width: 80%;
        }

        .abcdCls {
            display: flex;
            align-items: center;
            gap: 10px;
        }
    }
</style>
